import React, { useState, useEffect } from "react"
import marked from 'marked';
import service from "@@/services/user.service"
import { BaseEventOrig, Image, Picker, Text, View, RichText } from "@tarojs/components"
import {
    useDidHide,
    useDidShow,
    usePageScroll,
    usePullDownRefresh,
    useReachBottom,
    useReady,
    useResize,
    useTabItemTap,
    navigateTo,
    Current,
} from "@tarojs/taro"
import NavLayout from "@@/components/layout/nav.layout"
import TBread from "@@/t-ui/bread.tui"
import { productListResType, productType } from "@@/interfaces/api.interface"
import ProxyConfig from "@@/../config/proxy"
import "./productDetail.scss"

type breadType = {
    name: string | undefined
}

const Index = () => {
    const [product, setProduct] = useState<productListResType<productType>>()//
    const [breadList, setBreadList] = useState<breadType[]>([])
    useReady(() => {

    })
    useEffect(() => {
        setBreadList([
            { name: "SMB" },
            { name: decodeURI(Current.router?.params?.oneMenu || "") },
            { name: "产品详情" },
        ])
        let id = Number(Current.router?.params?.id)
        service.findProductDetail({ id }).then(res => {
            if (res.code === 200) {
                // res.data.content = res.data.content.replace(/\"><img/gi, 'decode="true"><img')
                // res.data.content = res.data.content.replace(/\alt="image.png">& nbsp;/gi, 'alt="image.png">')
                setProduct(res.data)
            }
        })
    }, [])

    const goProduct = (id: string) => {
        navigateTo({
            url: `/pages/recommendDetail/recommendDetail?id=${id}&oneMenu=${breadList[1].name}`
        })
    }
    return (
        <NavLayout border leftIconType="chevron-left" color="#141414" id="productDetailPage">
            <TBread breadList={breadList} />
            {
                product && <View className={"context_box"}>
                    <View className={"title"}>{product.title}</View>
                    {/* <RichText className={"text"} nodes={product?.content}></RichText> */}
                    <RichText className={"text"} nodes={marked(product?.content).replace(/<img/g, "<img class='markimg'")}></RichText>
                    {/* <View className={"text"} dangerouslySetInnerHTML={{ __html: product?.content }}></View> */}
                    <View className={'img_box'}><Image src={`${ProxyConfig.sourceUrl}/${product?.image}`} /></View>
                </View>
            }

            {
                product && <View className={"recommend_box"}>
                    <View className={"title_box"}>
                        <View className={'img_box'}><Image mode={"aspectFit"} src={require('@@/assets/img/product/tuijian.png')} /></View>
                        <Text>推荐产品</Text>
                    </View>
                    <View className={"list_box"}>
                        {
                            product.products.map(item => {
                                return <View className={"item_box"} key={item.id} onClick={goProduct.bind(this, item.productId)}>
                                    <View className={'img_box'}><Image mode={"aspectFit"} src={`${ProxyConfig.sourceUrl}/${item?.image}`} /></View>
                                    <View className={'content_box'}>
                                        <View className={"title"}>{item.title}</View>
                                        <View className={"detail"}>280KG单门防水磁力锁</View>
                                    </View>
                                </View>
                            })
                        }
                    </View>
                    <View className={"copyright_box"}>
                        <View className={"copyright"}>
                            <View>版权所有 © 浙江大华技术股份有限公司 1998-2021。 </View>
                            <View>保留一切权利。备案号A4-254545477号</View>
                        </View>
                    </View>
                </View>
            }
        </NavLayout>
    )
}

export default Index